<?php $this->renderPartial('../common/_header');?>
<div class="container my-container">
    <div class="row">
        <div class="col col-lg-3">
            <?php $this->renderPartial('//common/'.($this->user ? 'menu' : 'menu_guest'));?>
        </div>
        <div class="col col-lg-9">

            <div id="content-update">

                <div class="col col-lg-6">
                    <div class="page-header">
                        <h2>Cập nhật tài khoản</h2>
                    </div>


                    <?php $form=$this->beginWidget('CActiveForm', array(
                            'id'=>'user-form',
                            'enableClientValidation'=>true,
                            'clientOptions'=>array(
                                'validateOnSubmit' => true,
                                'validateOnChange' => true,
                            ),
                            'enableAjaxValidation'=>false,
                            'htmlOptions' => array('class' => 'form-horizontal my-form', 'enctype'=>"multipart/form-data")
                        )); ?>
                    <?php if($model->email_main):?>
                        <div class="row">
                            <?php echo $form->labelEx($model,'email_main', array('class' => 'col col-lg-4 control-label')); ?>
                            <div class="col col-lg-8">
                                <input type="text" class="input-small" disabled="disabled" value="<?php echo $model->email_main->email?>">
                            </div>
                        </div> 
                        <?php endif?>
                    <?php if($model->phone_main):?>
                        <div class="row">
                            <?php echo $form->labelEx($model,'phone_main', array('class' => 'col col-lg-4 control-label')); ?>
                            <div class="col col-lg-8">
                                <input type="text" class="input-small" disabled="disabled" value="<?php echo $model->phone_main->phoneLabel?>">
                            </div>
                        </div> 
                        <?php endif?>

                    <div class="row">
                        <?php echo $form->labelEx($model,'name', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">
                            <?php echo $form->textField($model,'name',array('placeholder'=> $model->getAttributeLabel('name'),'maxlength'=>255, 'class' => 'input-small')); ?>
                            <?php echo $form->error($model,'name');?>
                        </div>
                    </div> 

                    <div class="row" style="margin-bottom: 15px;">
                        <label class="col col-lg-4 control-label">Avatar</label>
                        <div class="col col-lg-8">

                            <div>
                                <div style="float: left;">
                                    <a id="a_file" class="upload_method">From computer</a> &nbsp;|&nbsp; 
                                    <a id="a_url" class="upload_method">From URL</a>
                                    <?php echo $form->hiddenField($model,'upload_method'); ?>
                                </div> 
                                <div style="clear: both;"></div>

                                <div id="image_file">
                                    <?php echo $form->fileField($model,'image_file', array('title' => 'Upload ảnh', 'name' => 'browse_file', 'class' => 'input-small')); ?>
                                </div>
                                <div id="image_url">
                                    <?php echo $form->textField($model,'image_url', array('placeholder' => 'http://domain.com/path/image.jpg', 'class' => 'input-small')); ?>
                                </div>
                                <?php echo $form->error($model,'image_file');?>
                                <?php echo $form->error($model,'upload_method');?>
                            </div>

                            <div id="div_image_preview">

                                <img id="img_file" style="display: none; height: 60px; width: auto;" /> 
                                <?php if($model->image):?>
                                    <img id="img_url" style="height: 60px; width: auto;" src="<?php echo $model->avatarUrl.'?'.uniqid()?>"/>
                                    <?php else:?> 
                                    <img id="img_url" style="height: 60px; width: auto; display: none; " />
                                    <?php endif?> 

                            </div>

                        </div>
                    </div> 
                    <style>
                        .upload_method{
                            cursor: pointer;
                        }
                        .upload_method.selected{
                            text-decoration: underline;
                            font-weight: bold;
                        }
                        #image_file, #image_url{
                            display: none;
                        }
                    </style>
                    <script>
                        $(function(){

                            $("#a_url").click(function(){
                                $('#a_file').removeClass('selected');    
                                $('#a_url').addClass('selected');    
                                $('#image_url').show();

                                if($('#img_url').attr('src')){
                                    $('#img_url').show();    
                                }

                                $('#image_file, #img_file').hide();    
                                $('#User_upload_method').val('url');    
                            });

                            $("#a_file").click(function(){
                                $('#a_url').removeClass('selected');    
                                $('#a_file').addClass('selected');    
                                $('#image_file').show();

                                if($('#img_file').attr('src')){
                                    $('#img_file').show();    
                                }

                                $('#image_url, #img_url').hide();
                                $('#User_upload_method').val('file');    
                            });


                            $("#browse_file").change(function(evt){
                                var files = evt.target.files;
                                var f = files[0];

                                if(!f.type.match('image.*')) {
                                    alert('File không hợp lệ. Hãy chọn 1 file ảnh khác.');
                                    return false;   
                                }

                                var i = document.createElement('input');
                                if('multiple' in i){
                                    var reader = new FileReader();
                                    reader.readAsDataURL(f);
                                    reader.onload = (function(){
                                        return function(e){
                                            $('#img_url').hide(); 
                                            $('#img_file').attr('src', e.target.result).show(); 
                                        };
                                    })(f);
                                    $('#img_review').show();
                                }
                            });

                            $("#User_image_url").bind('change keyup blur', function(evt){
                                var method = $('#User_upload_method').val();
                                var ext = $(this).val().split('.').pop().toLowerCase();
                                console.log(ext);
                                if(method == 'url' && $.inArray(ext, [ 'jpg', 'gif', 'png' ] >= 0)){
                                    $('#img_file').hide();
                                    $('#img_url').attr('src', $(this).val()).show();
                                    $('#img_review').show();   
                                } 
                            });

                            <?php if($model->upload_method == 'file'):?>
                                $('#image_file').show();    
                                $('#image_url').hide(); 
                                $('#a_file').addClass('selected'); 
                                <?php else:?>
                                $('#image_url').show();    
                                $('#image_file').hide();
                                $('#a_url').addClass('selected');
                                <?php if($model->image_url):?>
                                    $('#img_url').attr('src', '<?php echo $model->image_url?>').show();
                                    <?php endif?> 
                            <?php endif?>
                        });
                    </script>
                    <div class="row">
                        <?php echo $form->labelEx($model,'city_id', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">
                            <?php echo $form->dropDownList($model,'city_id', City::model()->data, array('class' => 'input-small')); ?>
                            <?php echo $form->error($model,'city_id');?>
                        </div>
                    </div>
                    <div class="row">
                        <?php echo $form->labelEx($model,'district_id', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">
                            <?php echo $form->dropDownList($model,'district_id', $district_data, array('class' => 'input-small')); ?>
                            <?php echo $form->error($model,'district_id');?>
                        </div>
                    </div>
                    <div class="row">
                        <?php echo $form->labelEx($model,'address', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">
                            <?php echo $form->textField($model,'address',array('size'=>60,'maxlength'=>255, 'class' => 'input-small')); ?>
                            <?php echo $form->error($model,'address');?>
                            <div id="address_full"></div>
                        </div>
                    </div>
                    <div class="row">
                        <?php echo $form->labelEx($model,'dob', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">

                            <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                                    //'name'=>'User[dob]',
                                    'attribute'=>'dob',
                                    'model'=>$model,
                                    'value' => $model->dob, 
                                    'language'=>'vi',
                                    'options'=>array(
                                        'showAnim'=>'fold',
                                        'dateFormat'=>'dd-mm-yy',
                                        'changeMonth' => 'true',
                                        'changeYear' => 'true',
                                        'yearRange' => '-90:-10',
                                        'defaultDate' => '01-01-1985'
                                    ),
                                    'htmlOptions'=>array(
                                        'style'=>'height:20px;',
                                        'class' => 'input-small'
                                    ),
                                ));?>
                            <?php echo $form->error($model,'dob');?>
                        </div>
                    </div>


                    <div class="row">
                        <?php echo $form->labelEx($model,'gender', array('class' => 'col col-lg-4 control-label')); ?>
                        <div class="col col-lg-8">
                            <?php echo $form->dropDownList($model,'gender', User::model()->genderData, array('class' => 'input-small')); ?>
                            <?php echo $form->error($model,'gender');?>
                        </div>

                        <div class="col col-lg-8 col-offset-4 margintop15">
                            <button class="btn btn-primary" type="submit">
                                <i class="icon-signin"></i> Cập nhật
                            </button>                               
                        </div>
                    </div> 

                    <?php $this->endWidget(); ?>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    $(function(){
        var districts = $.parseJSON('<?php echo json_encode(District::model()->dataGroupByCity)?>');
        $("#User_city_id").change(function(){
            var city_id = $(this).val();
            $("#User_district_id").html('');
            $.each(districts[city_id], function(key, value){
                $("#User_district_id").append('<option value="'+key+'">'+value+'</option>');
            });
            if($("#User_address").val().length > 0){
                write_address_full();    
            }

        });

        $("#User_district_id").change(function(){
            if($("#User_address").val().length > 0){
                write_address_full();    
            }
        });

        $("#User_address").keyup(function(){
            write_address_full();
        });

        function write_address_full(){
            var city =       $("#User_city_id option:selected").text();
            var district =   $("#User_district_id option:selected").text();
            var address =   $("#User_address").val();
            var addressFull = (address != '') ? address +', '+ district + ', '+ city : '';
            $('#address_full').text(addressFull);
        }
        write_address_full();

    });   
</script>